import {View, Text, Button, Flex, Spacer, Input} from 'native-base';
import {flexbox} from 'native-base/lib/typescript/theme/styled-system';
import React, {Component} from 'react';
import {StyleSheet, ToastAndroid} from 'react-native';
import DeviceInfo from 'react-native-device-info'; //引入获取用户设备信息的对象
import axios from '../../axios/index';
import getArrays from '../../utils/getArrays';
// import axios from 'axios'
//查看图片
import {Modal} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import ZoomPictureModel from '../../commponents/printing/ZoomPictureModel';
import {createIconSetFromFontello} from 'react-native-vector-icons';
class InnerPrinting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      params: this.props.navigation.getState().routes[1].params,
      isShowImage: false, //是否显示弹窗
      currShowImgIndex: 0, //  当前打开图片的index
      imgs: [], //保存图片的数组
      inputValue: '',
    };
  }

  componentDidMount() {
    //判断用户机型
    // console.log(DeviceInfo.getSystemName())//获取系统名称，安卓 以及 ios14以上 的加载webp格式图片，其他的加载原图,
    /////两种图片我还没搞清楚，Android
    // console.log(DeviceInfo.getSystemName() == 'Android')
    axios({
      method: 'post',
      url: `https://www.guyinbaike.com/${this.state.params.to}`,
      data: {
        params: this.state.params.library,
        get_length: true,
        key: true,
      },
    })
      .then(data => {
        console.log('印普', data.data[0]);
        let newImgData = Array.from(new Set(getArrays.Arrays(data.data[0])));
        console.log(newImgData);
        let imgArr = [];
        if (DeviceInfo.getSystemName() == 'Android') {
          for (let img of newImgData) {
            let imgHref = `${img}?imageView2/0/format/webp/interlace/1/q/1`;
            imgArr.push({
              url: `https:${imgHref.split(':')[1]}`,
            });
          }
        } else {
          for (let img of newImgData) {
            imgArr.push({url: img});
          }
        }
        this.setState({imgs: imgArr});
      })
      .catch(err => {
        console.log('印普错误', err);
      });
  }
  // 展示/隐藏 放大图片
  handleZoomPicture(flag, index) {
    this.setState({
      isShowImage: flag,
      currShowImgIndex: index || 0,
    });
  }

  searchPage(flag, index) {
    if (!isNaN(index)) {
      //这里要判断一下页数有没有超过总页数
      if (index > this.state.imgs.length - 1) {
        ToastAndroid.show(
          `本书共${this.state.imgs.length}页`,
          ToastAndroid.SHORT,
        );
      } else if (index < 0) {
        ToastAndroid.show(`请输入正数页码`, ToastAndroid.SHORT);
      } else {
        this.handleZoomPicture(flag, index);
      }
    } else {
      //输入的不是数字
      ToastAndroid.show(`请输入只有数字的页码`, ToastAndroid.SHORT);
    }
  }

  // 加载放大图片弹窗
  renderZoomPicture() {
    let {isShowImage, currShowImgIndex} = this.state;
    let zoomImages = this.state.imgs;

    return (
      <ZoomPictureModel
        isShowImage={isShowImage}
        currShowImgIndex={currShowImgIndex}
        zoomImages={zoomImages}
        callBack={flag => this.handleZoomPicture(flag)}></ZoomPictureModel>
    );
  }
  render() {
    return (
      <View style={styles.container}>
        <Flex direction="row">
          <Text
            style={{fontSize: 20, height: 30, lineHeight: 30, marginRight: 10}}>
            {this.state.params.library}
          </Text>
          <Text style={{color: '#767676', height: 30, lineHeight: 30}}>
            {this.state.params.person}
          </Text>
        </Flex>
        <Text style={{marginTop: 15, marginBottom: 20, color: '#767676'}}>
          {this.state.params.resume}
        </Text>
        <Flex h={40}>
          <Button
            bg="#F2F2F2"
            borderRadius={0}
            _text={{color: '#06AE56', fontSize: '18'}}
            colorScheme="#F2F2F2"
            w="100%"
            onPress={() => this.handleZoomPicture(true, 0)} //这里要调显示图片的函数
          >
            查看全书(左右翻看)
          </Button>
          <Spacer></Spacer>
          <Button
            bg="#F2F2F2"
            borderRadius={0}
            _text={{color: '#06AE56', fontSize: '18'}}
            colorScheme="#F2F2F2"
            w="100%"
            onPress={() =>
              this.props.navigation.navigate('UpDownPage', {
                library: this.state.params.library,
                person: this.state.params.person,
                imgs: this.state.imgs,
              })
            }>
            查看全书(上下翻看)
          </Button>
          <Spacer></Spacer>
          <Button
            bg="#F2F2F2"
            borderRadius={0}
            _text={{color: '#06AE56', fontSize: '18'}}
            colorScheme="#F2F2F2"
            w="100%"
            onPress={() => this.props.navigation.navigate('SealCuttings')}>
            快速检索印谱内印章
          </Button>
        </Flex>
        <Flex direction="row" justifyContent={'center'} style={{marginTop: 20}}>
          <Input
            variant="unstyled"
            w="180"
            bg="white"
            borderRadius={0}
            borderColor="white"
            marginRight={3}
            value={this.state.inputValue}
            onChangeText={value => {
              this.setState({inputValue: value});
            }} //输入框里面的内容改变的时候
            onSubmitEditing={() =>
              this.handleZoomPicture(true, this.state.inputValue - 1)
            } //在输入框输完点击回车
            placeholder="请输入您要查看的页码"
          />
          <Button
            _text={{color: 'white', fontSize: 17}}
            bg="#1C86EE"
            borderRadius={0}
            colorScheme="#1C86EE"
            onPress={() => {
              this.searchPage(true, this.state.inputValue - 1);
            }}>
            搜索
          </Button>
        </Flex>
        <Text
          fontSize="xs"
          style={{
            color: 'red',
            textAlign: 'center',
            marginTop: 10,
            marginBottom: 10,
          }}>
          书籍页数多，加载将比较缓慢，请耐心等待
        </Text>
        <Text style={{color: '#767676'}}>
          使用说明：请在输入框输入数字查看此数字页对应印谱，如输入10。切记不要输入第10页，10页等等多余字符
        </Text>

        <View style={styles.imgContainer}>{this.renderZoomPicture()}</View>
      </View>
    );
  }
}
export default InnerPrinting;

const styles = StyleSheet.create({
  container: {
    padding: 40,
    paddingBottom: 0,
    backgroundColor: '#EDEDED',
    height: '100%',
  },
  imgContainer: {
    flex: 1,
  },
});
